<template>
    <div class="banner-list" v-loading="loading">
        <div class="input-box">
            <span class="input-title" style="margin-left:0px;">banner关键字</span>
            <el-input
                placeholder="搜索banner标题关键字"
                @keyup.enter.native="selectChange"
                style="width:210px;"
                clearable
                v-model.trim="keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <span class="input-title">bannerID</span>
            <el-input
                placeholder="搜索bannerID"
                @keyup.enter.native="selectChange"
                style="width:210px;"
                clearable
                v-model.trim="bannerID">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

            <span class="input-title">状态筛选</span>
            <el-select
                @change="selectChange"
                style="width:150px;"
                v-model="status">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="展示中" :value="1"></el-option>
                <el-option label="已暂停" :value="0"></el-option>
                <!-- <el-option label="已删除" :value="-2"></el-option> -->
            </el-select>
            <el-button type="warning" class="btn" style="margin-left:20px" @click="getList(1)">搜索</el-button>
            <el-button type="success" class="btn" @click="goBannerDetail(0)">新建</el-button>
            <el-button type="primary" @click="onSort" class="add">保存排序</el-button>
        </div>
        <div class="table-box">
            <div class="title-box">
                <div class="item">ID</div>
                <div class="item">banner标题</div>
                <div class="item">状态</div>
                <div class="item">排序</div>
                <div class="item">创建时间</div>
                <div class="item">操作</div>
            </div>
            <div class="content-box">
                <div
                class="dragging-item"
                v-for="(item, index) in tableData"
                v-dragging="{ item: item, list: tableData }"
                :key="index"
                >
                <div class="item">
                    {{ item.id }}
                </div>
                <div class="item">
                    {{ item.title }}
                </div>
                <div class="item">
                    <div style="color: #67C23A;" v-if="item.status === 1">
                        <span class="point"></span>
                        <span>展示中</span>
                    </div>
                    <div style="color:#F56C6C;" v-if="item.status === 0">
                        <div class="point red-point"></div>
                        <span>已暂停</span>
                    </div>
                    <div style="color:#F56C6C;" v-if="item.status === 2">
                        <div class="point red-point"></div>
                        <span>已过期</span>
                    </div>
                </div>
                <div class="item">
                    {{ item.sort }}
                </div>
                <div class="item">
                    {{ item.createTime | timeInit}}
                </div>
                <div class="item">
                    <div v-if="item.auditstatus !== -1" :style="{'margin-right': item.status !== 2 ? '54px' : '30px'}">
                        <el-button v-if="item.status === 1" @click="changeStatus(item, 0)" type="text" size="small" style="color:#F56C6C;">暂停</el-button>
                        <el-button v-if="item.status === 0" @click="changeStatus(item, 1)" type="text" size="small" style="color:#67C23A;">展示</el-button>
                        <el-button v-if="item.status === 2" @click="goBannerDetail(item.id)" type="text" size="small" style="color:#67C23A;">更改日期</el-button>
                    </div>
                    <div>
                        <el-button @click="goBannerDetail(item.id)" type="text" size="small">查看详情</el-button>
                    </div>
                </div>
                </div>
                <div class="nodata" v-if="!tableData.length">暂无数据</div>
            </div>
        </div>

        <!-- <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column prop="id" label="ID" width="60"></el-table-column>

                <el-table-column prop="title" label="banner标题"></el-table-column>

                <el-table-column prop="status" label="状态" width="110">
                    <template slot-scope="scope">
                        <div style="color: #67C23A;" v-if="scope.row.status === 1">
                            <span class="point"></span>
                            <span>展示中</span>
                        </div>
                        <div style="color:#F56C6C;" v-if="scope.row.status === 0">
                            <div class="point red-point"></div>
                            <span>已暂停</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="sort" label="排序" width="110"></el-table-column>

                <el-table-column label="创建时间" width="110">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime | timeInit }}</span>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="110">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditstatus !== -1">
                            <el-button v-if="scope.row.status === 1" @click="changeStatus(scope.row, 0)" type="text" size="small" style="color:#F56C6C;">暂停</el-button>
                            <el-button v-if="scope.row.status === 0" @click="changeStatus(scope.row, 1)" type="text" size="small" style="color:#67C23A;">展示</el-button>
                        </div>
                        <div>
                            <el-button @click="goBannerDetail(scope.row.id)" type="text" size="small">查看详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div> -->

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            showTypeDialog: false, // 类型弹窗
            keyWord: null,
            status: null,
            bannerID: null,
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false
        }
    },

    activated () {
        this.getList(this.pageNum)
    },

    methods: {
        async onSort () {
            this.$confirm('排序将即时生效到客户端, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
            const result = await this.$http.post(
                '/trade/sortBanner',
                this.tableData
            )
            if (result.code !== '0') {
                this.$message.error(result.desc)
                return
            }
            this.$message.success('保存成功！')
            })
            .catch(() => {})
        },
        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            this.listParams = {
                status: this.status,
                keyWord: this.keyWord,
                id: this.bannerID,
                pageNum: pageNum,
                pageSize: this.pageSize
            }
            let res = await this.$http.get('/trade/selectBanner', {
                params: this.listParams
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        selectChange () {
            this.getList(1)
        },

        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },

        // 切换状态
        changeStatus (item, status) {
            let params = {
                bannerId: item.id,
                status
            }
            this.$http.post('/trade/updateBannerStatus', params).then(res => {
                if (res.code === '0') {
                    let message = status === 0 ? '已暂停' : '已展示'
                    item.status = status
                    this.$message({
                        type: 'success',
                        message
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },

        // 查看banner详情
        goBannerDetail (id) {
            let query = {}
            if (id) {
                query.id = id
            }
            this.$router.push({
                path: '/wzry/bannerDetail',
                query
            })
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .banner-list {
        .input-box {
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 10px;
            }
        }

        // .table-box {
        //     margin: 20px 0;
        //     .cover {
        //         width: 80px;
        //         height: 80px;
        //         > img {
        //             width: 100%;
        //             height: 100%;
        //         }
        //     }
        //     .desc {
        //         overflow: hidden;
        //         line-height: 20px;
        //         -webkit-line-clamp: 5;
        //         -webkit-box-orient: vertical;
        //         display: -webkit-box;
        //         height: 100px;
        //     }
        //     .user-icon {
        //         width: 20px;
        //         height: 20px;
        //         border-radius: 50%;
        //         margin-right: 5px;
        //         vertical-align: top;
        //     }
        //     .table-btn {
        //         cursor: pointer;
        //         color: #409EFF;
        //         font-size: 13px;
        //         font-weight: 500;
        //         &:hover {
        //             text-decoration: underline;
        //         }
        //     }
        //     .point {
        //         display:inline-block;
        //         width:10px;
        //         height:10px;
        //         border-radius: 50%;
        //         background-color:#67C23A;
        //         margin-right:3px;
        //     }
        //     .red-point {
        //         background-color: #F56C6C;
        //     }
        // }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .table-box {
            margin: 20px 0;
            border: 1px solid #ebeef5;
            border-bottom: none;
            border-right: none;
            .title-box {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                .item {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    padding: 10px;
                    height: 60px;
                    font-size: 14px;
                    color: #909399;
                    font-weight: bold;
                    border-right: 1px solid #ebeef5;
                }
            }
            .cover {
                width: 80px;
                height: 80px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .desc {
                overflow: hidden;
                line-height: 20px;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                height: 100px;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }

            .content-box {
                .dragging-item {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    .item {
                        flex: 1;
                        padding: 10px;
                        font-size: 14px;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        border-right: 1px solid #ebeef5;
                    }
                }
            }
            }
    }
</style>
